/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    TextInput,
    Alert,
    ToastAndroid,
    TouchableOpacity,
    KeyboardAvoidingView,
} from 'react-native';
import LoginButton from '../ui/loginButton';
import LoginInput from '../ui/loginInput';
import pxToDp from '../config/pxToDp'
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';

const instructions = Platform.select({
    ios: 'Press Cmd+R to reload,\n' +
        'Cmd+D or shake for dev menus',
    android: 'Double tap R on your keyboard to reload,\n' +
        'Shake or press menu button for dev menus ',
});
var Dimensions = require('Dimensions');

import Config from "../config/config"
import Loading from '../ui/loading'
var { width, height } = Dimensions.get('window');


export default class AccountLoginScene extends Component {
    constructor(props) {
        super(props)
        this.state = {
            userName:null ,
            userPwd:null ,
            userPhone:null ,
            modalVisible: false,
        }
    }
    helper(back) {
        console.log(this.state)
        fetch(Config.Url + "?m=User&c=Api&a=regist",{
            method:"POST",
            headers:{
                'Content-Type': 'application/x-www-form-urlencoded',
            },
            body:"phone="+ this.state.userPhone +"&password="+this.state.userPwd + "&nickname=" + this.state.userName,
        }).then((response)=>{

            response.json().then((content)=>{
                console.log(content);
                if(content.state.code == 0){
                    this.setState({modalVisible:!this.state.modalVisible})
                    ToastAndroid.show('注册成功', ToastAndroid.SHORT);
                    back.goBack();
                    return 1;
                }else{
                    this.setState({ modalVisible: !this.state.modalVisible })
                    ToastAndroid.show(content.state.msg, ToastAndroid.SHORT);
                    return 0;
                }
            })
        }).catch((error)=>{
            this.setState({ modalVisible: !this.state.modalVisible })
            ToastAndroid.show('网络连接错误，请稍后再试', ToastAndroid.SHORT);
            return 0;
        })
    }
    register (){
        let result = 0;
        if (this.state.userPhone != null && this.state.userPwd != null && this.state.userName != null){
            this.setState({modalVisible:!this.state.modalVisible})
            setTimeout(() => {
                result = this.helper(this.props.navigation)
            }, 1000)
        }else{
            ToastAndroid.show('请填写完整', ToastAndroid.SHORT);
        }
        
    }
    
    render() {
        
        const { navigate } = this.props.navigation;
        return (
            <KeyboardAvoidingView style={{ height: height, paddingBottom: 20,backgroundColor:"#fff" }}
            >   
                {
                    this.state.modalVisible == true ? (
                        <Loading notice={"注册中"} visible={this.state.modalVisible} requestClose={()=>{
                            this.setState({modalVisible:!this.state.modalVisible})
                        }}/>
                    ):(null)
                }
                <View style={{height:55,flexDirection:'row',alignItems:'center',borderBottomWidth:1,borderColor:'#f9f9f9'}}>
                    < TouchableOpacity onPress = {
                        ()=>{
                            this.props.navigation.replace('accountLogin')
                        }
                    } >
                        <View style={{width:60,alignItems:'center',justifyContent:'center'}}>
                            <MaterialIcons  name='keyboard-arrow-left' size={35}/>
                        </View>
                    </TouchableOpacity>
                    
                    <View style={{width:60,height:55,justifyContent:'center'}}>
                        <Text style={{alignSelf:'center',fontSize:18 }}>
                            登陆
                        </Text>
                    </View>
                </View>
                <View style={styles.container}>

                    <View style={styles.selectCountry}>
                        <View style={styles.center}>
                            <View style={styles.leftText}>
                                <Text>
                                    中国
                                </Text>
                            </View>
                            <View style={styles.rightText}>
                                <MaterialIcons  name='chevron-right' size={25}/>

                            </View>
                        </View>
                    </View>
                    <View style={styles.square}>
                    </View>
                    <View style={styles.two}>
                        <View style={styles.twoFirstChild}>

                            <LoginInput
                                secure={false}
                                changeText={(text)=>{
                                    this.setState({
                                        userName : text
                                    })
                                }}
                                cont="+86"
                                placeholder="请输入您的昵称">

                            </LoginInput>
                            <LoginInput
                                secure={true}
                                changeText={(text)=>{
                                    this.setState({
                                        userPwd : text
                                    })
                                }}
                                cont="密码&nbsp;"
                                placeholder="请填写登陆密码">

                            </LoginInput>
                            <LoginInput
                                secure={false}
                                changeText={(text)=>{
                                    this.setState({
                                        userPhone : text
                                    })
                                }}
                                cont="手机号"
                                placeholder="请填写您的手机号">
                            </LoginInput>
                            {/* <Text>
                                可以通过手机号登陆随聊或找回密码
                            </Text>
                            <View style={styles.capt}>
                                <TextInput placeholder="验证码"
                                    style={styles.twoInputs}
                                    underlineColorAndroid='transparent'
                                />
                                <TouchableOpacity
                                    style={styles.btn}
                                    color="#0074D9">
                                    <Text style={styles.text}>发送验证码</Text>
                                </TouchableOpacity>
                            </View> */}
                            <View style={styles.three}>
                                <LoginButton
                                    btnText="注册"
                                    login={this.register.bind(this)}>
                                </LoginButton>
                            </View>
                        </View>


                    </View>
                    <View style={styles.other}>
                        
                    </View>
                    

                </View>
            </KeyboardAvoidingView>
            
        );
    }
}


callService = () => {
    Alert.alert("联系客服")
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        // justifyContent: 'center',
        // padding: 20,
        // alignItems: 'center',
        backgroundColor: '#f9f9f9',
    },
    selectCountry:{
        marginLeft:10,
        paddingTop:15,
        paddingBottom:15,
        borderBottomWidth:1,
        borderColor:'rgb(220,220,220)',
    },
    center:{
        flexDirection:'row',
    },
    square:{
        width:15,
        height:15,
        borderBottomWidth:1,
        borderRightWidth:1,
        borderColor: 'rgb(220,220,220)',
        transform: [{
            rotate: '45deg'
        }],
        position: 'absolute',
        left:pxToDp(68),
        top:49,
        backgroundColor: '#fff',

    },
    leftText:{
        width:pxToDp(130),
        alignItems:'center',
        justifyContent:'center',
    },
    rightText:{
        width: pxToDp(460),
        alignItems: 'flex-end'
    },
    one: {
        flex: 2,
        // alignItems: 'flex-end',
    },
    title: {

        fontSize: 26,
        textAlign: 'center',
        alignItems: 'center',
        margin: 10,
        color: '#333333',
    },
    two: {
        flexDirection: 'row',
        flex: 4,
    },
    twoFirstChild: {
        marginLeft: 10,
        flexDirection: 'column',
        flex: 1,
    },
    capt:{
        flex: 1,
        flexDirection: 'row',
        marginTop:10,
    },
    twoInputs:{
        flex: 1,
        textAlign:'center',
        borderColor:"#909090",
        borderWidth:1,
        borderRadius:5,
    },

    other: {
        alignItems: 'flex-start',
        flex: 1,
    },
    three: {
        alignSelf:'center',
        flexDirection: 'row',
        marginTop:50,
        width:pxToDp(400),
        height:50,
    },

    four: {
        flexDirection: 'row',
        flex:1,
        justifyContent: 'center',
        alignItems: 'flex-end',
    },

    instructions: {
        height: 20,
        color: '#0074D9',
        alignItems: 'center',
    },

    btn: {
        flex: 1.5,
        alignItems: 'center',
        borderRadius: 10,
        backgroundColor: '#0074D9',
        justifyContent: 'center',
        marginLeft:20,
    },
    text: {
        fontSize: 14,
        color: '#fff',

    },

});
